<template>
	<view class="container">
		<!-- 账户详情 -->
		<view class="account">
			<view class="account-overview flex-c-c">
				<view class="fz36">总资产 (元)</view>
				<view class="account-box">
					<view class="account-money">
						{{visible ? (account && account.dynamic_Profit ? account.dynamic_Profit : '0.00') : '******'}}
						<view class="account-icon" @click="checkVisible">
							<u-icon v-if="visible" name="eye-fill"/>
							<u-icon v-else name="eye-off"/>
						</view>
					</view>
				</view>
				<view class="flex-c-c">
					<view style="margin-right: 10px;">持仓： {{visible ? (account && account.position_profit ? account.position_profit : '0.00') : '******'}}</view>
					<view>平仓： {{visible ? (account && account.close_profit ? account.close_profit : '0.00') : '******'}}</view>
				</view>
			</view>
			<view class="account-detail">
				<view class="account-item flex-b-c">
					<view class="accout-label">可用资金</view>
					<view class="accout-value">{{account && account.available ? account.available : '0.00'}} 元</view>
				</view>
				<view class="account-item flex-b-c">
					<view class="accout-label">出金</view>
					<view class="accout-value">{{account && account.withdraw ? account.withdraw : '0.00'}} 元</view>
				</view>
				<view class="account-item flex-b-c">
					<view class="accout-label">入金</view>
					<view class="accout-value">{{account && account.deposit ? account.deposit : '0.00'}} 元</view>
				</view>
			</view>
		</view>
		<!-- 持仓记录 -->
		<view class="list-view">
			<view class="list-head flex-b-c">
				<view class="list-head-label">持仓记录</view>
				<view class="list-head-span" v-if="posiTime">最后更新时间: {{posiTime}}</view>
			</view>
			<view class="list-table">
				<view class="list-item table-header flex-b-c">
					<view class="name">持仓合约</view>
					<view class="value">买卖</view>
					<view class="value">总仓</view>
					<view class="flex1">开仓均价</view>
					<view class="flex1">持仓盈亏</view>
				</view>
				<view class="list-item flex-b-c" v-for="item in position">
					<view class="name">{{item.instrument_id}}</view>
					<view class="value">{{item.direction ? '买' : '卖'}}{{item.direction == 2 ?'涨':'跌'}}</view>
					<view class="value">{{item.position}}</view>
					<view class="flex1">{{item.open_price}}</view>
					<view class="flex1">{{item.position_profit}}</view>
				</view>
				<view class="list-empty" v-if="posLoading">加载中，请耐心等待 <u-loading size="28" /></view>
				<view class="list-empty" v-if="!posLoading && position.length === 0">—— 暂无持仓记录 ——</view>
				<view class="list-empty" v-if="!posLoading && position.length > 0">—— 共有{{position.length}}条持仓记录 ——</view>
			</view>
		</view>
		<!-- 委托记录 -->
		<view class="list-view">
			<view class="list-head flex-b-c">
				<view class="list-head-label">委托记录</view>
				<view class="list-head-span" v-if="entTime">最后更新时间: {{entTime}}</view>
			</view>
			<view class="list-table">
				<view class="list-item table-header flex-b-c">
					<view class="name">委托合约</view>
					<view class="value">买卖</view>
					<view class="value">开平</view>
					<view class="value">手数</view>
					<view class="flex1">报单价</view>
					<view class="flex2">状态</view>
				</view>
				<view class="list-item flex-b-c" v-for="item in entrust">
					<view class="name">{{item.instrument}}</view>
					<view class="value">{{item.b_s ? '买' : '卖'}}{{item.direction == 2 ?'涨':'跌'}}</view>
					<view class="value">{{item.o_c ? '平' : '开'}}仓</view>
					<view class="value">{{item.lots}}</view>
					<view class="flex1">{{item.price}}</view>
					<view class="flex2" v-if="item.status === 0">已撤单</view>
					<view class="flex2" v-if="item.status === 1">已提交部分</view>
					<view class="flex2" v-if="item.status === 2">已提交全部</view>
				</view>
				<view class="list-empty" v-if="entLoading">加载中，请耐心等待 <u-loading size="28" /></view>
				<view class="list-empty" v-if="!entLoading && entrust.length === 0">—— 暂无委托记录 ——</view>
				<view class="list-empty" v-if="!entLoading && entrust.length > 0">—— 共有{{entrust.length}}条委托记录 ——</view>
			</view>
		</view>
		<!-- 成交记录 -->
		<view class="list-view">
			<view class="list-head flex-b-c">
				<view class="list-head-label">成交记录</view>
				<view class="list-head-span" v-if="insTime">最后更新时间: {{insTime}}</view>
			</view>
			<view class="list-table">
				<view class="list-item table-header flex-b-c">
					<view class="name">成交合约</view>
					<view class="value">买卖</view>
					<view class="value">开平</view>
					<view class="value">手数</view>
					<view class="flex1">成交价</view>
					<view class="flex1">成交时间</view>
				</view>
				<view class="list-item flex-b-c" v-for="item in inster">
					<view class="name">{{item.instrument}}</view>
					<view class="value">{{item.b_s ? '买' : '卖'}}{{item.direction == 2 ?'涨':'跌'}}</view>
					<view class="value">{{item.o_c ? '平' : '开'}}仓</view>
					<view class="value">{{item.lots}}</view>
					<view class="flex1">{{item.price}}</view>
					<view class="flex1">{{item.accomplish_time}}</view>
				</view>
				<view class="list-empty" v-if="insLoading">加载中，请耐心等待 <u-loading size="28" /></view>
				<view class="list-empty" v-if="!insLoading && inster.length === 0">—— 暂无成交记录 ——</view>
				<view class="list-empty" v-if="!insLoading && inster.length > 0">—— 共有{{inster.length}}条成交记录 ——</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getAccountInfo, positionList, entrustList, insterList } from '@/api/member.js'
	export default {
		data() {
			return {
				visible: true,
				account: null, //账户详情
				position: [], //持仓记录
				posiTime: '',
				posLoading: true,
				entrust: [], //委托记录
				entTime: '',
				entLoading: true,
				inster: [], //成交记录
				insTime: '',
				insLoading: true,
			}
		},
		onLoad() {
			this.getAccount()
			this.getPosition()
			this.getEntrust()
			this.getInster()
		},
		methods: {
			// 资金可见
			checkVisible() {
				this.visible = !this.visible
			},
			// 资金格式
			formatNum(value) {
				if (!isNaN(value)) {
					return value.toFixed(2)
				}
				return '0.00'
			},
			// 获取时间戳
			timestamp(gap) {
				let date = new Date()
				let stamp = new Date(parseInt(date.setHours('20')))
				stamp = new Date(parseInt(stamp.setMinutes('0')))
				stamp = new Date(parseInt(stamp.setSeconds('0')))
				stamp = parseInt(stamp.setMilliseconds('0'))
				if (gap) {
					let num = gap;
					for (let i = 0; i < gap; i++) {
						let timeStr = stamp - i*86400000
						let day = new Date(parseInt(timeStr)).getDay()
						if (day === 6 || day === 0) {
							num += 1
						}
					}
					stamp = stamp - num*86400000
				}
				return stamp/1000
			},
			//查询账户详情
			getAccount() {
				getAccountInfo().then(res => {
					if (res.code === 200) {
						this.account = res.data
					}
				})
			},
			//查询持仓记录
			getPosition() {
				positionList().then(res => {
					if (res.code === 200) {
						const { list, time } = res.data
						let arr = res.data.list.map(item => {
							if(item.open_price == null){
								item.open_price = 0
							}
							item.open_price = this.formatNum(item.open_price)
							item.position_profit = this.formatNum(item.position_profit)
							return item
						})
						this.position = arr
						this.posiTime = time
					}
					this.posLoading = false
				}).catch(err => {
					this.posLoading = false
				})
			},
			//查询委托记录
			getEntrust() {
				let data = {
					start_time: this.timestamp(1),
					end_time: this.timestamp()
				}
				entrustList(data).then(res => {
					if (res.code === 200) {
						const { list, time } = res.data
						this.entrust = list
						this.entTime = time
					}
					this.entLoading = false
				}).catch(err => {
					this.entLoading = false
				})
			},
			//查询成交记录
			getInster() {
				let data = {
					start_time: this.timestamp(3),
					end_time: this.timestamp()
				}
				insterList(data).then(res => {
					if (res.code === 200) {
						const { list, time } = res.data
						this.inster = list
						this.insTime = time
					}
					this.insLoading = false
				}).catch(err => {
					this.insLoading = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: calc(100vh - var(--top-window-height));
		.flex-b-c {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.t-c {
			text-align: center;
		}
		.flex-c-c {
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.fz36 {
			font-size: 36rpx;
		}
		.account {
			overflow: hidden;
			background-color: #FFFFFF;
			.account-overview {
				flex-direction: column;
				padding: 40rpx 64rpx;
				background-color: #3E8EF7;
				color: #ffffff;
				.account-box {
					line-height: 64rpx;
					padding: 0 32rpx;
					margin: 20rpx 0;
					text-align: center;
					border-bottom: 1px solid #FFFFFF;
					.account-money {
						display: inline-block;
						position: relative;
						font-size: 64rpx;
						.account-icon {
							font-size: 48rpx;
							position: absolute;
							left: 100%;
							top: 0;
							margin-left: 32rpx;
						}
					}
				}
			}
			.account-detail {
				padding: 20rpx 64rpx;
				.account-item {
					height: 80rpx;
					padding: 0 36rpx;
					border-bottom: 1rpx solid #E7E7E7;
					&:last-child {
						border-bottom: none;
					}
				}
			}
		}
		.list-view {
			margin-top: 24rpx;
			background-color: #ffffff;
			padding: 20rpx 32rpx;
			.list-head {
				line-height: 88rpx;
				padding: 0 12rpx;
				border-bottom: 1px solid #E7E7E7;
				.list-head-label {
					font-size: 36rpx;
					font-weight: 600;
				}
				.list-head-span {
					font-size: 24rpx;
					color: #999999;
				}
			}
			.list-table {
				border: 1px solid #E7E7E7;
				border-top: none;
				.table-header {
					padding: 16rpx 0;
					background-color: #F8F8F8;
					font-size: 32rpx;
					font-weight: 600;
				}
				.list-item {
					line-height: 64rpx;
					border-bottom: 1px solid #F2F2F2;
					font-size: 28rpx;
					text-align: center;
					.name {
						width: 132rpx;
						text-align: left;
						padding-left: 16rpx;
					}
					.value {
						width: 80rpx;
					}
					.flex1 {
						flex: 1;
						padding-right: 16rpx;
						text-align: right;
					}
					.flex2 {
						width: 176rpx;
						padding-right: 16rpx;
						text-align: right;
					}
				}
				.list-empty {
					line-height: 88rpx;
					text-align: center;
					color: #666666;
					.u-loading {
						margin-left: 16rpx;
					}
				}
			}
		}
	}
</style>
